<template>
  <div>
    <!-- <iframe ref="iframe" :src="iframeUrl" class="iframe" /> -->
  </div>
</template>

<script>
export default {
  name: 'AvueIframe',
  // eslint-disable-next-line vue/require-prop-types
  props: ['routerPath'],
  data() {
    return {
      fullscreenLoading: false,
      iframeUrl: '',
      urlPath: this.getUrlPath() // iframe src 路径
    }
  },
  watch: {
    $route: function() {
      // this.load()
    },
    routerPath: function() {
      // 监听routerPath变化，改变src路径
      this.urlPath = this.getUrlPath()
    }
  },
  // created() {
  //   NProgress.configure({ showSpinner: false })
  // },
  mounted() {
    // this.load()
    // this.resize()
  },
  methods: {
    // 显示等待框
    show() {
      this.fullscreenLoading = true
    },
    // 隐藏等待框
    hide() {
      this.fullscreenLoading = false
    },
    // 加载浏览器窗口变化自适应
    // resize() {
    //   window.onresize = () => {
    //     this.iframeInit()
    //   }
    // },
    // 加载组件
    load() {
      if (this.$route.path.includes('/myiframe')) {
        this.show()
        var flag = true // URL是否包含问号
        if (this.$route.query.src.indexOf('?') === -1) {
          flag = false
        }
        var list = []
        for (var key in this.$route.query) {
          if (key !== 'src' && key !== 'name') {
            if (!this.$route.query.src.includes('menuCode')) {
              list.push(`${key}=${this.$route.query[key]}`)
            }
          }
        }
        list = list.join('&').toString()
        if (flag && !this.$route.query.src.includes('menuCode')) {
          this.iframeUrl = `${this.$route.query.src}${
            list.length > 0 ? `&${list}` : ``
          }`
        }
        if (!flag && !this.$route.query.src.includes('menuCode')) {
          this.iframeUrl = `${this.$route.query.src}${
            list.length > 0 ? `?${list}` : ``
          }`
        }
        // 超时5s自动隐藏等待框，加强用户体验
        let time = 5
        const timeFunc = setInterval(() => {
          time--
          if (time === 0) {
            this.hide()
            clearInterval(timeFunc)
          }
        }, 1000)
        // this.iframeInit()
      }
    },
    // iframe窗口初始化
    iframeInit() {
      const iframe = this.$refs.iframe
      // const clientHeight = document.documentElement.clientHeight - (screen > 1 ? 200 : 130)
      const clientHeight = window.innerHeight - 107
      iframe.style.height = `${clientHeight}px`
      if (iframe.attachEvent) {
        iframe.attachEvent('onload', () => {
          this.hide()
        })
      } else {
        iframe.onload = () => {
          this.hide()
        }
      }
    },
    getUrlPath: function() {
      // 获取 iframe src 路径
      let url = window.location.href
      url = url.replace('/myiframe', '')
      return url
    }
  }
}
</script>

<style lang="scss">
// .iframe {
//   width: 100%;
//   height: 100%;
//   border: 0;
//   overflow: hidden;
//   box-sizing: border-box;

//   &::-webkit-scrollbar-track-piece{
//     background-color: transparent;
//     border: 0;
//   }
//   &::-webkit-scrollbar {
//     width: 8px;
//     height: 8px;
//   }
//   &::-webkit-scrollbar-thumb {
//     border-radius: 1em;
//     background-color: rgba(50,50,50,.1);
//   }
// }
</style>
